.main-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
 .main-toolbar {
    position: fixed;
    right:0px;
    width:auto;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background: #FFFFFF;
    color: #000000;
    /* Make sure the toolbar will stay on top of the content as it scrolls past. */
    z-index: 1;
  }
  
   
  .main-sidenav-container {
    /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
       causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
    flex: 1;
  }
  
  .main-is-mobile .main-sidenav-container {
    /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
       `<body>` to be our scrolling element for mobile layouts. */
    flex: 1 ;
  }
  

  mat-sidenav {
    width: 240px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }

  .logo-wrapper{
    height: 80px;
    border-bottom: 1px solid rgba(153, 153, 153, 0.3);
    margin-bottom: 10px;
  }

  .logo-wrapper img{
    max-width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 7%;
    padding-bottom: 7%;
    height: auto;
  }

  *, ::after, ::before {
    box-sizing: border-box;
  }
  